<template>
    <div class="employee-care-page">
        <!-- 頁面標題 -->
        <page-title :title="'員工關懷'" />

        <!-- Tab 切換 -->
        <div class="tab-section">
            <el-tabs v-model="activeTab" @tab-click="handleTabChange">
                <el-tab-pane label="生日關懷" name="birthday"></el-tab-pane>
                <el-tab-pane label="入職週年關懷" name="anniversary"></el-tab-pane>
            </el-tabs>
        </div>

        <!-- 篩選條件區域 -->
        <div class="filter-section">
            <el-form :model="filterForm" label-width="100px" label-position="right">
                <el-row :gutter="20">
                    <el-col :span="4">
                        <el-form-item label="部門">
                            <el-select v-model="filterForm.department" placeholder="請選擇部門" clearable>
                                <el-option v-for="item in departmentOptions" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item :label="activeTab === 'birthday' ? '生日月份' : '入職月份'">
                            <el-select v-model="filterForm.month" placeholder="請選擇月份" clearable>
                                <el-option v-for="item in monthOptions" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="員工類型">
                            <el-select v-model="filterForm.employeeType" placeholder="請選擇類型" clearable>
                                <el-option v-for="item in employeeTypeOptions" :key="item.value" :label="item.label"
                                    :value="item.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="關鍵字搜索">
                            <el-input v-model="filterForm.keyword" placeholder="請輸入員工姓名/員工編號" clearable
                                @clear="handleSearch" @keyup.enter="handleSearch">
                                <template #append>
                                    <el-button type="primary" @click="handleSearch">
                                        <el-icon>
                                            <Search />
                                        </el-icon>
                                    </el-button>
                                </template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>

        <!-- 操作按鈕區域 -->
        <div class="action-section">
            <el-button type="primary" @click="batchSendBlessings">
                <el-icon>
                    <Promotion />
                </el-icon>
                <span>批量發送祝福</span>
            </el-button>
            <el-button type="info" @click="openBlessingSettings">
                <el-icon>
                    <Setting />
                </el-icon>
                <span>{{ activeTab === 'birthday' ? '設置生日祝福' : '設置週年祝福' }}</span>
            </el-button>
        </div>

        <!-- 表格區域 -->
        <div class="table-section">
            <!-- 生日關懷表格 -->
            <el-table v-if="activeTab === 'birthday'" :data="birthdayList" style="width: 100%" v-loading="loading"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" />
                <el-table-column prop="name" label="員工姓名" width="120" />
                <el-table-column prop="employeeId" label="員工編號" width="120" />
                <el-table-column prop="department" label="組織部門" width="150" />
                <el-table-column prop="position" label="職位" width="150" />
                <el-table-column prop="employeeType" label="員工類型" width="120">
                    <template #default="{ row }">
                        <el-tag :type="getEmployeeTypeTagType(row.employeeType)">
                            {{ row.employeeType }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="onboardingDate" label="入職日期" width="120" />
                <el-table-column prop="birthday" label="生日日期" width="120" />
                <el-table-column prop="deliveryMethod" label="發送方式" width="120">
                    <template #default="{ row }">
                        <el-tag :type="row.deliveryMethod === '郵件+短信' ? 'success' : 'info'">
                            {{ row.deliveryMethod }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="發送狀態" width="120">
                    <template #default="{ row }">
                        <el-tag :type="getStatusTagType(row.status)">
                            {{ row.status }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="120" fixed="right">
                    <template #default="{ row }">
                        <el-button type="text" size="small" @click="sendBlessing(row)">發送</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 入職週年關懷表格 -->
            <el-table v-else-if="activeTab === 'anniversary'" :data="anniversaryList" style="width: 100%"
                v-loading="loading" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55" />
                <el-table-column prop="name" label="員工姓名" width="120" />
                <el-table-column prop="employeeId" label="員工編號" width="120" />
                <el-table-column prop="department" label="組織部門" width="150" />
                <el-table-column prop="position" label="職位" width="150" />
                <el-table-column prop="employeeType" label="員工類型" width="120">
                    <template #default="{ row }">
                        <el-tag :type="getEmployeeTypeTagType(row.employeeType)">
                            {{ row.employeeType }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="onboardingDate" label="入職日期" width="120" />
                <el-table-column prop="serviceYears" label="司齡" width="120">
                    <template #default="{ row }">
                        <el-tag type="info">
                            {{ row.serviceYears }}年
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="deliveryMethod" label="發送方式" width="120">
                    <template #default="{ row }">
                        <el-tag :type="row.deliveryMethod === '郵件+短信' ? 'success' : 'info'">
                            {{ row.deliveryMethod }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="發送狀態" width="120">
                    <template #default="{ row }">
                        <el-tag :type="getStatusTagType(row.status)">
                            {{ row.status }}
                        </el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="120" fixed="right">
                    <template #default="{ row }">
                        <el-button type="text" size="small" @click="sendBlessing(row)">發送</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分頁 -->
            <div class="pagination-section">
                <el-pagination v-model:current-page="pagination.currentPage" v-model:page-size="pagination.pageSize"
                    :page-sizes="[10, 20, 50, 100]" layout="total, sizes, prev, pager, next, jumper"
                    :total="pagination.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
            </div>
        </div>

        <!-- 祝福設置對話框 -->
        <el-dialog v-model="blessingSettingsVisible" :title="activeTab === 'birthday' ? '生日祝福設置' : '週年祝福設置'"
            width="600px">
            <el-form :model="blessingSettingsForm" label-width="120px" label-position="right">
                <el-form-item label="祝福標題" required>
                    <el-input v-model="blessingSettingsForm.title" placeholder="請輸入祝福標題" />
                </el-form-item>
                <el-form-item label="祝福內容" required>
                    <el-input v-model="blessingSettingsForm.content" type="textarea" :rows="5" placeholder="請輸入祝福內容" />
                </el-form-item>
                <el-form-item label="發送方式" required>
                    <el-checkbox-group v-model="blessingSettingsForm.deliveryMethods">
                        <el-checkbox label="郵件" />
                        <el-checkbox label="短信" />
                        <el-checkbox label="企業微信" />
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item label="自動發送">
                    <el-switch v-model="blessingSettingsForm.autoSend" />
                    <span class="tip-text">開啟後將在員工生日/入職週年當天自動發送祝福</span>
                </el-form-item>
                <el-form-item label="提前提醒">
                    <el-select v-model="blessingSettingsForm.remindDays" placeholder="請選擇提前天數" style="width: 120px">
                        <el-option v-for="item in remindDayOptions" :key="item.value" :label="item.label"
                            :value="item.value" />
                    </el-select>
                    <span class="tip-text">天前提醒HR發送祝福</span>
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="blessingSettingsVisible = false">取消</el-button>
                <el-button type="primary" @click="saveBlessingSettings">保存</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { Search, Promotion, Setting } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// Tab 切換
const activeTab = ref('birthday')

// 篩選表單
const filterForm = reactive({
    department: '',
    month: '',
    employeeType: '',
    keyword: ''
})

// 下拉選項
const departmentOptions = [
    { value: 'rd', label: '研發部' },
    { value: 'hr', label: '人事部' },
    { value: 'finance', label: '財務部' },
    { value: 'marketing', label: '市場部' },
    { value: 'sales', label: '銷售部' }
]

const monthOptions = [
    { value: '1', label: '1月' },
    { value: '2', label: '2月' },
    { value: '3', label: '3月' },
    { value: '4', label: '4月' },
    { value: '5', label: '5月' },
    { value: '6', label: '6月' },
    { value: '7', label: '7月' },
    { value: '8', label: '8月' },
    { value: '9', label: '9月' },
    { value: '10', label: '10月' },
    { value: '11', label: '11月' },
    { value: '12', label: '12月' }
]

const employeeTypeOptions = [
    { value: 'fulltime', label: '全職' },
    { value: 'parttime', label: '兼職' },
    { value: 'intern', label: '實習生' },
    { value: 'contract', label: '合同工' }
]

const remindDayOptions = [
    { value: '1', label: '1' },
    { value: '3', label: '3' },
    { value: '7', label: '7' },
    { value: '15', label: '15' },
    { value: '30', label: '30' }
]

// 表格數據
const loading = ref(false)
const birthdayList = ref([
    {
        id: 1,
        name: '張三',
        employeeId: '10001',
        department: '研發部',
        position: '前端開發',
        employeeType: 'fulltime',
        onboardingDate: '2020-05-15',
        birthday: '1990-06-15',
        deliveryMethod: '郵件+短信',
        status: '已發送'
    },
    {
        id: 2,
        name: '李四',
        employeeId: '10002',
        department: '人事部',
        position: '人事專員',
        employeeType: 'fulltime',
        onboardingDate: '2019-08-20',
        birthday: '1988-06-20',
        deliveryMethod: '郵件',
        status: '待發送'
    },
    {
        id: 3,
        name: '王五',
        employeeId: '10003',
        department: '市場部',
        position: '市場專員',
        employeeType: 'fulltime',
        onboardingDate: '2021-03-10',
        birthday: '1992-06-05',
        deliveryMethod: '郵件+短信',
        status: '發送失敗'
    }
])

const anniversaryList = ref([
    {
        id: 4,
        name: '趙六',
        employeeId: '10004',
        department: '財務部',
        position: '會計',
        employeeType: 'fulltime',
        onboardingDate: '2018-07-01',
        serviceYears: 5,
        deliveryMethod: '郵件+短信',
        status: '已發送'
    },
    {
        id: 5,
        name: '錢七',
        employeeId: '10005',
        department: '銷售部',
        position: '銷售代表',
        employeeType: 'fulltime',
        onboardingDate: '2019-07-15',
        serviceYears: 4,
        deliveryMethod: '郵件',
        status: '待發送'
    },
    {
        id: 6,
        name: '孫八',
        employeeId: '10006',
        department: '研發部',
        position: '後端開發',
        employeeType: 'fulltime',
        onboardingDate: '2020-07-20',
        serviceYears: 3,
        deliveryMethod: '郵件+短信',
        status: '發送失敗'
    }
])

// 分頁
const pagination = reactive({
    currentPage: 1,
    pageSize: 10,
    total: 10
})

// 多選
const selectedRecords = ref([])

// 祝福設置對話框
const blessingSettingsVisible = ref(false)
const blessingSettingsForm = reactive({
    title: '',
    content: '',
    deliveryMethods: ['郵件', '短信'],
    autoSend: true,
    remindDays: '3'
})

// 方法
const handleTabChange = () => {
    selectedRecords.value = []
    handleSearch()
}

const handleSearch = () => {
    loading.value = true
    // 模擬API請求
    setTimeout(() => {
        loading.value = false
    }, 500)
}

const batchSendBlessings = () => {
    if (selectedRecords.value.length === 0) {
        ElMessage.warning('請至少選擇一條記錄')
        return
    }

    ElMessageBox.confirm(
        `確定要批量發送 ${selectedRecords.value.length} 條祝福嗎？`,
        '提示',
        {
            confirmButtonText: '確定',
            cancelButtonText: '取消',
            type: 'warning'
        }
    ).then(() => {
        // 模擬發送祝福
        const ids = selectedRecords.value.map(item => item.id)
        if (activeTab.value === 'birthday') {
            birthdayList.value.forEach(item => {
                if (ids.includes(item.id)) {
                    item.status = '已發送'
                }
            })
        } else {
            anniversaryList.value.forEach(item => {
                if (ids.includes(item.id)) {
                    item.status = '已發送'
                }
            })
        }
        ElMessage.success('批量發送成功')
    }).catch(() => {
        ElMessage.info('已取消批量發送')
    })
}

const sendBlessing = (record) => {
    ElMessageBox.confirm(
        `確定要發送${activeTab.value === 'birthday' ? '生日' : '週年'}祝福給 ${record.name} 嗎？`,
        '提示',
        {
            confirmButtonText: '確定',
            cancelButtonText: '取消',
            type: 'warning'
        }
    ).then(() => {
        // 模擬發送祝福
        if (activeTab.value === 'birthday') {
            const index = birthdayList.value.findIndex(item => item.id === record.id)
            if (index !== -1) {
                birthdayList.value[index].status = '已發送'
            }
        } else {
            const index = anniversaryList.value.findIndex(item => item.id === record.id)
            if (index !== -1) {
                anniversaryList.value[index].status = '已發送'
            }
        }
        ElMessage.success('發送成功')
    }).catch(() => {
        ElMessage.info('已取消發送')
    })
}

const openBlessingSettings = () => {
    // 模擬獲取當前設置
    blessingSettingsForm.title = activeTab.value === 'birthday' ? '生日快樂！' : '感謝您的付出！'
    blessingSettingsForm.content = activeTab.value === 'birthday'
        ? '親愛的{name}，祝您生日快樂！願您在新的一歲裡身體健康，工作順利，生活幸福！'
        : '親愛的{name}，今天是您加入公司的第{years}週年，感謝您一直以來的辛勤付出！'
    blessingSettingsForm.deliveryMethods = ['郵件', '短信']
    blessingSettingsForm.autoSend = true
    blessingSettingsForm.remindDays = '3'

    blessingSettingsVisible.value = true
}

const saveBlessingSettings = () => {
    if (!blessingSettingsForm.title || !blessingSettingsForm.content || blessingSettingsForm.deliveryMethods.length === 0) {
        ElMessage.warning('請填寫完整信息')
        return
    }

    ElMessage.success('保存成功')
    blessingSettingsVisible.value = false
}

const handleSelectionChange = (selection) => {
    selectedRecords.value = selection
}

const handleSizeChange = (val) => {
    pagination.pageSize = val
    handleSearch()
}

const handleCurrentChange = (val) => {
    pagination.currentPage = val
    handleSearch()
}

const getEmployeeTypeTagType = (type) => {
    switch (type) {
        case 'fulltime': return 'success'
        case 'parttime': return 'warning'
        case 'intern': return 'info'
        case 'contract': return ''
        default: return 'info'
    }
}

const getStatusTagType = (status) => {
    switch (status) {
        case '已發送': return 'success'
        case '待發送': return 'warning'
        case '發送失敗': return 'danger'
        default: return 'info'
    }
}
</script>

<style lang="less" scoped>
.employee-care-page {
    padding: 20px;
    background-color: #fff;

    .tab-section {
        margin-bottom: 16px;

        :deep(.el-tabs__header) {
            margin-bottom: 0;
        }
    }

    .filter-section {
        padding: 16px;
        margin-bottom: 16px;
        background-color: #fff;
        border-radius: 4px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
    }

    .action-section {
        margin-bottom: 16px;
        display: flex;
        gap: 12px;
    }

    .table-section {
        background-color: #fff;
        padding: 16px;
        border-radius: 4px;
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);

        .pagination-section {
            margin-top: 16px;
            display: flex;
            justify-content: flex-end;
        }
    }

    .tip-text {
        margin-left: 10px;
        color: #999;
        font-size: 12px;
    }
}
</style>